<template>
  <div class="mt-40">
    <div class="suggest-box">
      <a-card
        @click="toDetail(item.id)"
        class="mr-20"
        hoverable
        style="width: 360px"
        v-for="item in suggestList"
        :key="item.id"
      >
        <template #cover>
          <img class="suggest-cover" :src="item.cover" />
        </template>
        <a-card-meta>
          <template #title>
            <div class="suggest-box-title">
              <span class="title">{{ item.name }}</span>
              <a-tag color="blue" size="small">
                {{ item.pubInstitution }}</a-tag
              >
            </div>
          </template>
          <template #description>
            <div class="row-ellipsis-frist">
              <span
                ><a-icon
                  type="file-text"
                  theme="filled"
                  style="color: orange"
                />
                融资额度：{{ item.financingAmount }}</span
              >
              <a-icon type="file-text" theme="filled" style="color: orange" />
              参考利率：{{ item.rate }}
            </div>

            <div class="row-ellipsis-frist">
              <span
                ><a-icon
                  type="environment"
                  theme="filled"
                  style="color: blue"
                />
                产品类型：{{
                  getProdcutTypeDictLabel(item.type, prodcutTypes)
                }}</span
              >
              <a-icon type="money-collect" theme="filled" style="color: red" />
              贷款方式：{{ getProdcutTypeDictLabel(item.loanType, loanTypes) }}
            </div>
          </template>
        </a-card-meta>
      </a-card>
    </div>
  </div>
</template>
<script>
import { getCompaynInfo, getCompanyList } from "@/apis/com/company";
import { getClientCrelist } from "@/apis/cre/crePord";
import { getCookiesUserInfo, getToken } from "@/utils/auth";
export default {
  components: {},
  props: {
    prodcutTypes: {
      default: [],
      type: Array,
    },
    loanTypes: {
      default: [],
      type: Array,
    },
  },
  data() {
    return {
      // 获取登录人企业信息
      companyInfo: {},
      // 推荐产品列表
      suggestList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      console.log("getToken()", getToken());

      if (getToken()) {
        await this.compaynInfo();
        console.log("this.company", this.companyInfo);
        const params = {
          pageNum: 1,
          pageSize: 3,
          applicable: this.companyInfo.industry,
          isGround: 1,
        };
        const res = await getClientCrelist(params);
        if (res.code == 200) {
          console.log("suggestList", res.rows);

          this.suggestList = res.rows;
        }
      }
    },

    async compaynInfo() {
      const id = JSON.parse(getCookiesUserInfo()).companyId;
      const res = await getCompaynInfo(id);
      if (res.code == 200) {
        this.companyInfo = res.data;
      }
    },

    getProdcutTypeDictLabel(val, array) {
      return array.find((item) => item.dictValue == val).dictLabel;
    },
    toDetail(id) {
      this.$emit("selected", id);
    },
  },
};
</script>
<style lang="less" scoped>
.suggest-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .suggest-cover {
    height: 300px;
    object-fit: cover;
  }

  .suggest-box-title {
    display: flex;
    justify-content: space-between;

    .title:hover {
      color: @color-188;
    }
  }

  .row-ellipsis-frist {
    padding: 2px 0;
    font-size: 14px;

    span {
      margin-right: 10px;
      display: inline-block;
      width: 150px;
    }
  }
}
</style>
